<style lang="scss">
@import "../uv.scss";
</style>
<template>
  <div class="p1756452081 pb30 mt30  pt30" :class="'pickup_address-' + serviceStatus">
    <div class="fac pl30 pr30 jcsb">
      <div class="fac" style=" display: flex;flex-wrap: wrap;">
        <div class="p1756449733   fz26" :style="{ color: typeForm[form.type]['color'], background: typeForm[form.type]['bgColor'] }" style="display: inline-block;">{{ typeForm[form.type]?.text }}</div>
        <slot name="time"></slot>
      </div>
      <div v-if="serviceStatus != 5" style="font-weight: 700;color: #E60012;">
        <div class="fz30" style="display: inline;">¥</div>
        <div class="fz40" style="display: inline;">{{ form.order_price }}</div>
      </div>
    </div>
    <div @click="openDesc" class="f pl30 pt30 pb10 pr30">
      <u-line v-if="clientHeight > 0" :deliveryType="deliveryType" :serviceStatus="serviceStatus" :clientHeight="clientHeight"></u-line>
      <div class="pl30 w100">
        <div ref="address" id="address" class="w100">
          <div class="fz34 p1756524270">
            <div v-if="form.type == 3" style="display: inline;line-height: 1.2;">
              <div class="f  jcsb" v-if="form.purchase_address_type == 1">{{ form._pur.storey }}&nbsp;
                <div v-if="form.is_report_location == 0 && serviceStatus == 2" @click.stop="openMap({ latitude: form._pur.lat, longitude: form._pur.lng, name: form._pur.storey, address: form._pur.address })" class=" f" style="justify-content: flex-end;width: 50rpx;">
                  <div class="p1757471683"></div>
                </div>
              </div>
              <div v-else class="pb30">就近购买</div>
            </div>
            <div v-else class="f  jcsb">
              <div>
                <div v-if="form._p.storey" style="display: inline;line-height: 1.2;">{{ form._p.storey }}&nbsp;</div>
                <div v-if="form._p.number" class="fz32" style="display: inline;line-height: 1;">({{ form._p.number }})</div>
              </div>
              <div v-if="form.is_report_location == 0 || serviceStatus == 2" @click.stop="openMap({ latitude: form._p.lat, longitude: form._p.lng,  name: form._p.storey + ' ' + (form._p.number || ''), address: form.pickup_address  })" class=" f" style="justify-content: flex-end;width: 50rpx;">
                <div class="p1757471683"></div>
              </div>
            </div>
          </div>
          <view v-if="form.type == 3 && form.purchase_address_type == 1" class="fz30 _pur.address  p1756525801 p1757144413 " :class="form._pur.address ? 'pt10 pb30' : 'pt10'">{{ form._pur.address }}</view>
          <template v-else>
            <view v-if="form.pickup_address" class="fz30  p1756525801  pickup_address  p1757144413" :class="form.pickup_address.trim() ? 'pt10 pb30' : 'pt10'">{{form.pickup_address }}</view>
          </template>
        </div>
        <div class="fz34 f jcsb  p1756524284 pt10 w100" style="line-height: 1.2;">
          <div>
            <div v-if="form._d.storey" class="di">{{ form._d.storey }}</div>
            <div v-if="form._d.number" style="display: inline;">({{form._d.number }})</div>
          </div>
          <div v-if="serviceStatus == 3" @click.stop="openMap({ latitude: form._d.lat, longitude: form._d.lng,name: form._d.storey + ' ' + (form._d.number || ''), address: form._d.address   })" class=" f " style="justify-content: flex-end;width: 50rpx;">
            <div class="p1757471683"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="p1756531243  fz30" v-if="serviceStatus == 3">
      <uv-icon name="phone-fill" color="#000000" size="36rpx"></uv-icon>&nbsp;&nbsp;{{ form._d.name}}&nbsp;&nbsp;{{ form._d.tel }}
      <div style="display: inline;color: #F37E00;"></div>
    </div>
    <div class="fz30 pl30 pt20" style="color: #9FA0A0;" v-if="serviceStatus == 4 || serviceStatus == 5">订单编号：{{ form.order_no }}</div>
    <template v-if="serviceStatus != 4 && serviceStatus != 5">
      <div @click="openDesc" v-if="(form.type == 1 || form.type == 2) && (serviceStatus == 1 || serviceStatus == 2 || serviceStatus == 0)" class="p1756520318" style="line-height: 1.3;">
        <div class="fz30" style="font-weight: 700;display: inline;">{{ form.goods_type_name }}：</div>
        <div class="fz30" style="display: inline;">{{ form.weight }}公斤</div>
      </div>
      <div @click="openDesc" v-if="(serviceStatus == 1 || serviceStatus == 2 || serviceStatus == 0) && form.remarks" class="p1756520318" style="line-height: 1.3;color: #F37E00;">
        <div class="fz30" style="font-weight: 700;display: inline;">顾客备注：</div>
        <div class="fz30" style="display: inline;">{{ form.remarks }}</div>
      </div>
      <slot v-if="(serviceStatus == 1 || serviceStatus == 0)" class="f pl30  pr30" name="button"></slot>
      <div @click.stop v-else class="f jcsb pl30 pt10 pt30 pr30" style="flex:1;width: 100%;box-sizing: border-box;">
        <div class="p1756456030">
          <uv-icon name="chat-fill" color="#333" size="45rpx"></uv-icon>
          <div style="color: #3E3A39;" class="fz28">在线会话</div>
        </div>
        <div class="p1756456538">
          <uv-line direction="col" color="#B5B5B6"></uv-line>
        </div>
        <div class="p1756456030">
          <uv-icon name="phone-fill" color="#333" size="45rpx"></uv-icon>
          <div style="color: #3E3A39;" class="fz28">联系</div>
        </div>
        <slot name="button"></slot>
      </div>
    </template>
  </div>
</template>

<script>
import lineVue from './line.vue'
import dataJsonMixin from '../mixin/dataJson.js'
export default {
  props: {
    serviceStatus: {
      type: Number,
      default: 0
    },
    deliveryType: {
      type: Number,
      default: 1
    },
    form: {
      type: Object,
      default: {}
    },
  },
  components: {
    'u-line': lineVue,
  },
  mixins: [dataJsonMixin],
  data() {
    return {
      list: [],
      clientHeight: 0,
      timer: null
    }
  },
  onReady() { },
  mounted() {
    this.lineHeightFun()
  },
  methods: {
    launchAppError(e) {
    },
    openDesc() {
      if (this.serviceStatus == 0) return
      uni.navigateTo({
        url: '/pages-neighbor/orderDesc?id=' + this.form.id
      });
    },
    openMap(data) {
      let { latitude, longitude, name, address } = data

      uni.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        name: name || '',
        address: address || '',
      })
    },
    lineHeightFun() {
      this.$nextTick(() => {
        this.timer = setInterval(() => {
          if (this.$refs.address && this.$refs.address.clientHeight) {
            this.clientHeight = this.$refs.address.clientHeight
            clearInterval(this.timer)
          } else {
            uni.createSelectorQuery().in(this).select("#address").boundingClientRect((data) => {
              if (data) {
                this.clientHeight = 0
                this.clientHeight = data.height
              }
            }).exec();
          }
        }, 50)
        this.setTimeoutFun(300)
        setTimeout(() => {
          clearInterval(this.timer)
          this.setTimeoutFun(0)
        }, 3000)
      })

    },
    setTimeoutFun(t) {
      setTimeout(() => {
        if (this.$refs.address && this.$refs.address.clientHeight && this.$refs.address.clientHeight != this.clientHeight) {
          this.clientHeight = 0
          this.clientHeight = this.$refs.address.clientHeight
        } else {
          uni.createSelectorQuery().in(this).select("#address").boundingClientRect((data) => {
            if (data) {
              this.clientHeight = 0
              this.clientHeight = data.height
            }
          }).exec();
        }
      }, t)
    },
    previewImageTap(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current,
        fail() {
          this.$uv.toast('预览图片失败')
        },
      });
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../common.scss";

.p1756452081 {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  margin-top: 30rpx;
  overflow: hidden;
}

.pickup_address-0.p1756452081 {
  box-shadow: none !important;
}

.p1756449733 {
  font-weight: 500;

  max-width: 130rpx;
  height: 45rpx;
  min-height: 45rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 45rpx;
  margin-right: 10rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.p1756450135 {
  width: 130rpx;
  max-width: 130rpx;
  margin-right: 30rpx;
  line-height: 1;
}

.p1756451654 {
  background: #f7f8f8;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  width: calc(100% - 130rpx);
  box-sizing: border-box;
  margin-right: 30rpx;
  line-height: 1.3;
}

.p1756450619 {
  width: calc(100% - 20rpx);
  height: 100%;
  max-height: 160rpx;
}

.pr15 {
  padding-right: 10rpx;
}

.p1756455380 {
  width: 80rpx;
  min-width: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 20rpx;

  .p1756459759 {
    line-height: 1;
  }
}

.p1756456030 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 width: 200rpx;
  height: 80rpx;
}

.p1756456538 {
  height: 40rpx;
  margin-left: 20rpx;
}

.p1756460319 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p1756460633 {
  padding: 30rpx 30rpx 30rpx 65rpx;
}

.mt40 {
  margin-top: 40rpx;
}

.p1756520318 {
  background: #f7f8f8;
  border-radius: 10rpx;
  margin-left: 90rpx;
  margin-right: 30rpx;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.pickup_address-3 {
  .p1756524270 {
    color: #898989 !important;
    font-weight: 700 !important;
  }

  .p1756525801 {
    padding: 0 !important;
    color: transparent !important;
  }
  .di {
    font-weight: 700 !important;
  }
}

.pickup_address-0,
.pickup_address-1 {
  .p1756524284,
  .p1756524270 {
    font-weight: 700 !important;
  }
}

.pickup_address-6,
.pickup_address-2 {
  .p1756524270 {
    font-weight: 700 !important;
  }

  .p1756524284 {
    font-weight: normal !important;
  }
}

.pickup_address-4 {
  .p1756524270 {
    font-weight: normal !important;
  }

  .p1756525801 {
    padding: 0 !important;
    color: transparent !important;
  }

  .p1756524284 {
    padding-top: 0 !important;
  }
}

.pickup_address-5 {
  .p1756524270 {
    font-weight: normal !important;
    color: #9fa0a0 !important;
  }

  .p1756525801 {
    padding: 0 !important;
    color: transparent !important;
  }

  .p1756524284 {
    padding-top: 0 !important;
    color: #9fa0a0 !important;
  }
}

.p1756531243 {
  display: inline-flex;
  border-radius: 10rpx;
  border: 2rpx solid #dcdddd;
  margin-left: 120rpx;
  margin-right: 30rpx;
  padding: 15rpx 20rpx 15rpx 20rpx;
  box-sizing: border-box;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  line-height: 1;
  align-items: baseline;
}

.p1757144413 {
  line-height: 1.2;
  box-sizing: border-box;
  color: #595757;
}
</style>
